<template>
	<view>
		<view class="share-content" id="posterImg">
			<view class="share-content-info">
				<view class="limit-num">限时限量</view>
				<view id="goodInfo">
					<view class="share-user">
						<image id="avatar" :src="goodInfo.customer[0].avatar" mode=""></image>
						<view class="share-user-baisc">
							<view class="" id="nickName">{{goodInfo.customer[0].nickname}}</view>
							<view class="">邀请你一起参加活动</view>
						</view>
					</view>
					<view class="goods-img">
						<image :src="goodInfo.image[0].image"  id="goodInfoImg" mode=""></image>
					</view>
					<view class="goods-title" id="goodName">{{goodInfo.name}}</view>
					<view class="act-time" id="goodTime">
						活动时间：<text>{{goodInfo.start_date}} 至 {{goodInfo.end_date}}</text>
					</view>
					<view class="act-course-content" id="goodCourse">
						<view class="act-course-title">
							<text>部份特价课程</text>
							<text>原价</text>
							<text>特惠价</text>
							<text>成团价</text>
						</view>
						<view class="act-course-details-share" v-for="(item,index) in goodInfo.course_msg" :key='index'>
							<text>{{item.name |goodName}}</text>
							<text>¥{{item.origin_price}}</text>
							<text>¥{{item.special_price}}</text>
							<text>¥{{item.group_purchase_price}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="share-code">
					<view class="share-code-text">
						<view class="" id="text1">长按保存，分享给好友</view>
						<view class="">
							<text id="text2">识别二维码，查看参与活动课程</text>
							<image src="https://tool.tuanhaoke.cn/static/image/home/invitation_icon_go.png" mode=""></image>
						</view>
					</view>
					<view class="share-code-img">
						<image id="qrCode" src="https://tool.tuanhaoke.cn/static/image/home/course1.png" mode=""></image>
					</view>
				</view> -->
			</view>
		</view>
		<canvas id="canvas" canvas-id="canvas" :style="{width: posterWidth + 'px', height: posterHeight + 'px', position: 'fixed', zIndex: '-10', left: '0', top: '-9999px'}"></canvas>
		<view class="share-link" data-clipboard-action="copy" :data-clipboard-text="shopAddress" @click="copeAddress">
			直接分享链接给好友
		</view>
		<view class="share-type">
			<view class="" @click="share">
				<image :src="imglink + 'home/share-wechat.png'" mode=""></image>
				<view class="">分享微信好友</view>
			</view>
			<view class="" @click="share">
				<image style="margin-left: 24upx;" :src="imglink + 'home/share-type.png'" mode=""></image>
				<view class="">分享朋友圈</view>
			</view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
		<!-- 复制地址成功提示 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				复制地址成功
			</view>
		</view>
	</view>
</template>

<script>
	
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Clipboard from 'clipboard'
	export default{
		components:{uniPopup},
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 40) {
					return value.slice(0, 40) + '...'
				}
				return value
			},
			goodName(value) {
				if (!value) return ''
				if (value.length > 23) {
					return value.slice(0, 23) + '...'
				}
				return value
			}
		},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				info:{},
				goodInfo:'',
				posterWidth: 0,
				posterHeight: 0,
				token: this.$store.getters.getToken,
				// userId: this.$store.getters.getUserId,
				select: false,
				store_id:'',
				activity_id:'',
				itemAct:"",
				shopAddress:'',
				saveState:false,
				
				// 二维码生成
				
			}
		},
		onLoad(options) {
			this.activity_id = options.actId
			
			let store_id = parseInt(options.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			
			this.goodInfo = uni.getStorageSync('shareAct')
			console.log(this.goodInfo)
			this.getCustomer()
			// this.drawCanvas()
		},
		mounted() {
		},
		methods:{
			copeAddress(){
				const clipboard = new Clipboard('.share-link')
				clipboard.on('success', (e) => {
					this.saveState = true
					setTimeout(()=> {
						this.saveState = false
					},2000)
				  clipboard.destroy()
				})
				clipboard.on('error', () => {
				  clipboard.destroy()
				})
			},
			share(){
				this.$refs.shareTip.open()
			},
			//#ifdef H5
			async sharePatriarch(itemAct,customer_info){
				
				let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
				console.log(signLink,'signLink')
				let data = {
					token:this.$store.getters.getToken,
					url:signLink
				}
				// console.log(this.store_info,'1111111')
				let _self = this
				try{
					
					let configData = JSON.parse((await this.$api.gain_share_data(data)).data)
					
					wx.config(configData)
					wx.ready(function(){
						wx.checkJsApi({
							jsApiList: [
								'updateTimelineShareData',
								'updateAppMessageShareData',
								'onMenuShareAppMessage',
								'onMenuShareTimeline'
							],
							success: function(res) {
								console.log('接口检测成功:'+res);
							},
							error: function(err) {
								console.log('接口检测失败:'+err);
							}
						})
							
						const shareData = { 
							title: itemAct.name, // 分享标题
							desc: customer_info.nickname + '邀请您加入' + itemAct.name + '活动', // 分享描述
							link: _self.current_url()+'/pages/home/organization/activeDetail-3?store_id=' + _self.store_id + '&actId=' + itemAct.activity_id + '&customer_id=' + customer_info.customer_id + '&page_type=share',
							imgUrl: itemAct.image[0].image, // 分享图标
							success: function (res) {
							  console.log(res,'success ---')
							},
							fail:function(err){
								console.log(err.errMsg,'fail ---')
							}
						}
						wx.updateAppMessageShareData(shareData);
						wx.updateTimelineShareData(shareData);
					})
					
				}catch(e){
					console.log(e)
				}
			},
			//#endif
			
			// 获取所有活动信息
			getActList(){
				this.page = 1
				let data = {
					token:this.$store.getters.getToken,
					activity_id:this.activity_id
				}
				this.$api.gain_all_act(data).then(res => {
					console.log(res)
					if(res.status){
						this.itemAct = res.list.data[0]
						this.sharePatriarch(this.itemAct,this.customer_info)
						this.shopAddress = this.current_url()+'/pages/home/organization/activeDetail-3?store_id=' + this.store_id + '&actId=' + this.itemAct.activity_id + '&customer_id=' + this.customer_info.customer_id + '&page_type=share'
						console.log(this.shopAddress,'复制链接')
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getCustomer(){
				
				const data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res)
					if(res.status){
						this.customer_info = res.data.userinfo
						this.getActList()
					}
				}).catch(err => {
					console.log(err)
				})
				// let customer_info = this.$api.getCustomerInfo(data)
				// console.log(this.customer_info)
				
			},
			
			
		}
	}
</script>

<style>
	/* 复制地址成功 */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	.popup_box_de_share{
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	page{
		background: #F3F3F4;
	}
	.share-content{
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
		background: linear-gradient(to-right,#F93D2F,#F99466);
	}
	.share-content-info{
		width: 100%;
		padding: 30upx 20upx;
		box-sizing: border-box;
		border: 2upx solid #FFDC34;
		background: #FFFFFF;
		border-radius: 20upx;
		position: relative;
	}
	.limit-num{
		width: 168upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 40upx 0 0 40upx;
		box-shadow: 0 4upx 12upx 0 rgba(255, 108, 77, 0.32);
		position: absolute;
		top: 34upx;
		right: -2upx;
	}
	.share-user{
		display: flex;
		width: 100%;
	}
	.share-user>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.share-user-baisc{
		margin-left: 20upx;
	}
	.share-user-baisc>view:first-child{
		color: #333333;
		font-size: 28upx;
	}
	.share-user-baisc>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.goods-img{
		width: 100%;
		height: 366upx;
		margin-top: 20upx;
	}
	.goods-img>image{
		width: 100%;
		height: 100%;
	}
	.goods-title{
		margin-top: 20upx;
		color: #333333;
		font-size: 30upx;
	}
	.act-time{
		margin-top: 20upx;
		color: #666666;
		font-size: 24upx;
	}
	.act-time>text{
		color: #FF391F;
	}
	.act-course-content{
		width: 100%;
		margin-top: 20upx;
	}
	.act-course-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		display: flex;
		justify-content: space-between;
		padding: 0 30upx 0 20upx;
		box-sizing: border-box;
	}
	.act-course-title>text{
		display: inline-block;
		color: #FFFFFF;
		font-size: 24upx;
	}
	.act-course-title>text:nth-child(1){
		width: 284upx;
		/* margin-left: 20upx; */
	}
	.act-course-title>text:nth-child(2){
		width: 120upx;
		text-align: right;
		/* margin-left: 188upx; */
	}
	.act-course-title>text:nth-child(3){
		width: 150upx;
		text-align: right;
		/* margin-left: 60upx; */
	}
	.act-course-title>text:nth-child(4){
		width: 150upx;
		text-align: right;
		/* margin-left: 40upx; */
	}
	.act-course-details-share{
		width: 100%;
		padding: 20upx 0 18upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.act-course-details-share>text{
		display: block;
		font-size: 28upx;
	}
	.act-course-details-share>text:nth-child(1){
		width: 284upx !important;
		font-size: 24upx;
	}
	.act-course-details-share>text:nth-child(2){
		margin-left: 50upx;
		color: #999999;
		text-decoration: line-through;
		line-height: 64upx;
	}
	.act-course-details-share>text:nth-child(3){
		margin-left: 22px;
		color: #FF391F;
		line-height: 64upx;
	}
	.act-course-details-share>text:nth-child(4){
		margin-left: 24px;
		color: #FF391F;
		line-height: 64upx;
	}
	.share-code{
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.share-code-text>view:first-child{
		color: #333333;
		font-size: 28upx;
		margin-bottom: 10upx;
	}
	.share-code-text>view:last-child{
		width: 376upx;
		/* padding:10upx 10upx 10upx 20upx  ;
		box-sizing: border-box; */
		padding-left: 20upx;
		/* padding-top: 10upx; */
		box-sizing: border-box;
		height: 48upx;
		line-height: 48upx;
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 33upx;
		font-size: 22upx;
	}
	.share-code-text>view>text{
		vertical-align: middle;
	}
	.share-code-text>view>image{
		width: 28upx;
		height: 28upx;
		border-radius: 50%;
		margin-left: 10upx;
		vertical-align: middle;
	}
	.share-code-img,.share-code-img>image{
		width: 106upx;
		height: 106upx;
	}
	.share-link{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		background: #FFFFFF;
		color: #666666;
		font-size: 26upx;
	}
	.share-type{
		width: 100%;
		display: flex;
		padding: 24upx 116upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.share-type>view{
	}
	.share-type>view>image{
		width: 80upx;
		height: 80upx;
		margin-left: 36upx;
	}
	.share-type>view>view{
		color: #999999;
		font-size: 24upx;
		margin-top: 10upx;
	}
</style>
